<template>
    <div v-loading="loading">
        <!-- 面包导航 -->
        <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片主体 -->
        <el-card class="box-card">
            <div class="block">
        <!-- 搜索 -->
		<el-form :inline="true" :model="page" class="demo-form-inline" size="mini">
			<el-form-item label="名称">
				<el-input v-model="page.params.nickname" placeholder="角色名称" clearable />
			</el-form-item>
            <el-form-item label="是否激活">
				<el-radio-group v-model="page.params.status">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                </el-radio-group>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="getRoleList" size="mini">查询</el-button>
			</el-form-item>
		</el-form>
		<el-divider/>

        <div style="margin:15px 0px 15px 0"><el-button type="primary" @click="handleView" size="mini" icon="el-icon-plus"></el-button></div>
		<el-table :data="page.list" border style="width: 100%">
            <el-table-column
            fixed
            type="index"
            :index="indexMethod">
            </el-table-column>
            <el-table-column  prop="id" label="ID" width="80" v-if="show"/>
			<el-table-column  prop="roleName" label="角色名称" />
			<el-table-column prop="remark" label="角色描述" />
            <el-table-column prop="modifiedTime" label="修改时间">
                <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.modifiedTime }}</span>
                </template>
            </el-table-column>
			<el-table-column prop="status" label="是否激活">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status" :inactive-value="0" :active-value="1"  @change="changRoleStatus(scope.row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column  label="操作"  fixed="right">
                <template slot-scope="scope">
                    <el-button @click="handleEdit(scope.row.id)" type="primary" icon="el-icon-edit" size="small" circle></el-button>
                    <el-button @click="handleAddMenu(scope.row.id)" type="primary"  size="small" icon="el-icon-menu" circle></el-button>
                    <el-button @click="handleDelete(scope.row.id)" type="danger" icon="el-icon-delete" size="small" circle></el-button>
                </template>
            </el-table-column>
		</el-table>

		<!-- 分页 -->
	<el-pagination
	   class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalCount">
    </el-pagination>
    </div>
    </el-card>

    <el-dialog title="分配菜单" :visible.sync="dialogFormVisible" :center="true">
            <!-- @closeDialog = "closeDialog" 传方法-->
          <addMenu :id="id" @closeDialog = "closeDialog"></addMenu>
	</el-dialog>

    <el-dialog title="添加角色信息" :visible.sync="viewVisible" :center="true">
          <views  @closeDialog = "closeView" @getRoleList = "getRoleList"></views>
	</el-dialog>
    <el-dialog title="编辑角色信息" :visible.sync="editVisible" :center="true">
          <update :editForm="editForm" @closeDialog = "closeEdit" @getRoleList = "getRoleList"></update>
	</el-dialog>
            


    </div>
</template>
<style>
.el-table th,td{ text-align: center !important; }

</style>>

<script>
import roleApi from "@/api/role"
import addMenu from "./doAddMenu"
import { Message } from 'element-ui'
import views from "./view"
import update from "./update"
	export default {
		components: {
            addMenu,
            update,
            views
		},
		data(){
			return {
				page: {
					currentPage: 1,
					pageSize:10,
					totalPage: 0,
					totalCount:0,
					params: {},
					list: []
                },
                loading: true,
                show: false,
                dialogFormVisible: false,
                editVisible: false,
                viewVisible: false,
                editForm: {},
                id: ""

            }
		},
		created(){
            this.getRoleList()
            setTimeout(() => {
                this.loading = false;
            }, 500);
		},
		methods:{
          indexMethod(index) {
            return (index * 1)+1;
          },
		  handleSizeChange(val) {
			this.page.pageSize = val
			this.getRoleList()
          },
          handleCurrentChange(val) {
			this.page.currentPage = val
			this.getRoleList()
		  },
          getRoleList(){
            roleApi.getRoleList(this.page).then(res =>{
                this.page = res.data.data
            })
          },
          handleEdit(id){
            roleApi.viewRole(id).then(res => {
                this.editForm = res.data.data
            })
            this.editVisible = true
          },
          handleView(){
            this.viewVisible = true
          },
          handleDelete(id){
            this.$confirm('是否刪除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
                }).then(() => {
                roleApi.deleteRole(id).then(res => {
                    Message.success(res.message)
                     this.getRoleList()
                })
            })

          },
          handleAddMenu(id){
              this.id = id
            this.dialogFormVisible = true
            
          },
          closeDialog(){
			this.dialogFormVisible = false
          },
          //改变用户禁用状态
          async changRoleStatus(row) {
            roleApi.update(row).then(res => {
                if(row.status == 0){
                    Message.success("已禁用！")
                }else{
                    Message.success("已激活！")
                }
                this.getRoleList()
            })
          },
          closeView(){
              this.viewVisible = false
          },
          closeEdit(){
              this.editVisible = false
          },
          


		}
	}
</script>